<!--
 * @Author: 李金深 2896583081@qq.com
 * @Date: 2023-06-06 15:46:11
 * @LastEditors: 李金深 2896583081@qq.com
 * @LastEditTime: 2023-06-20 11:11:44
 * @FilePath: /com.huizhouyiren.web.d0101/src/components/editor/editor.vue
 * @Description: 富文本编辑器
-->
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { i18nChangeLanguage } from '@wangeditor/editor'  //
import mitt from "@/mitt/index"
import use$i18n from "@/hooks/use$i18n.js"



const $t = use$i18n()

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const mode = ref('simple') // 或 'simple'

// 内容 HTML
const valueHtml = ref(null)
// 

let show = ref(true)


const toolbarConfig = {
    excludeKeys: ["group-image", "insertVideo", "insertTable", "codeBlock", "codeBlock", "insertLink", "todo", "bgColor", 'fullScreen']
}
const editorConfig = { placeholder: $t('email.inputContent') }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}

/**
 * @description: 获取编辑器的内容
 * @return {*}
 */
const getEditorContent = () => {
    return valueHtml.value
}

/**
 * @description: 设置编辑器的值
 * @param {*} content
 * @return {*}
 */
const setEditorContent = (content) => {
    setTimeout(() => {
        valueHtml.value = content
    }, 10)
}



defineExpose({
    getEditorContent, setEditorContent
})

mitt.on("changeLanguage", (flag) => {
    flag ? i18nChangeLanguage('en') : i18nChangeLanguage('zh-CN')
    show.value = false
    setTimeout(() => {
        show.value = true
    }, 10)
})

</script> 
<template>
    <div style="height: 28.125rem;">
        <div style="border: 1px solid #ccc" v-if="show">
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                :mode="mode" />
            <Editor style="height: 25rem; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
                :mode="mode" @onCreated="handleCreated" />
        </div>
    </div>
</template>
<style></style>